<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            background-color: gold;

            /* 清除浮动 */
            overflow: hidden;
        }
    </style>
</head>
<body>
    <!-- 
        浮动元素的特点:
            1）浮动元素脱标 （半脱离，有字围效果）
            2）包裹性  如果没有设置宽度，浮动的元素宽度只会包裹内容
            3）破坏性  如果子都浮动，都出国，父如果没有设置高度，高度会变成0，就是所谓的高度塌陷

        浮动会对父元素造成影响：
            如果父元素没有设置高度，子都浮动了，父的高度就会变成0，我们需要清楚这种影响，专业叫清除浮动。

        清除浮动的方案：
            1）给父元素添加 overflow:hidden;
     -->
    <div class="box">
        <div class="item" style="float:left; width:100px; height:100px; background:red">son1</div>
    </div>
</body>

</html>